<template>
  <div class="page">
    <div class="line"></div>
    <div class="infobox mgb">
      <div class="avatarbox" style=" margin:0 auto;">
        <div class="" style="width: 60px;margin:0px auto;position: relative;">
          <avatar v-if="loginer" :src="loginer.avatarUrl"></avatar>
          <div class="tag" :class="{'warning': role == 'student', 'info': role == 'teacher'}"
            style="position: absolute;bottom: 0;right: -10px;top: auto;"
          >{{roleName}}</div>
        </div>
        <div class="" style="padding-top:8px;">
          {{loginer.nickName}}
        </div>
      </div>
      <div class="edit" @tap="gotoInfo()" v-if="role == 'teacher'">修改</div>
    </div>
    <div class="weui-cells weui-cells_after-title">
      <navigator url="/pages/user-change-role/main" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__bd">我的身份</div>
        <div class="weui-cell__ft weui-cell__ft_in-access">{{roleName}}</div>
      </navigator>
    </div>
    <div v-if="role == 'teacher'" class="weui-cells weui-cells_after-title">
      <navigator url="/pages/user-groups/main" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__bd">我的班级</div>
        <div class="weui-cell__ft weui-cell__ft_in-access"></div>
      </navigator>
    </div>
    <div v-if="role == 'student'" class="weui-cells weui-cells_after-title">
      <navigator url="/pages/member-groups/main" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__bd">我的班级</div>
        <div class="weui-cell__ft weui-cell__ft_in-access"></div>
      </navigator>
    </div>
    <!-- <div v-if="role == 'teacher'" class="weui-cells weui-cells_after-title">
      <navigator url="/pages/contact-us/main" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__bd">联系我们</div>
        <div class="weui-cell__ft weui-cell__ft_in-access"></div>
      </navigator>
    </div> -->
    <tab-bar></tab-bar>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'
import TabBar from '@/components/tab-bar'
import base from '@/mixins/base'

export default {
  mixins: [base],
  data () {
    return {
      isPageShow: false
    }
  },
  components: {
    PageCommon,
    Avatar,
    TabBar,
  },
  computed: {
    ...mapGetters([
      'role',
      'loginer',
      'roleName'
    ])
  },
  methods: {
    onPageShow () {
      this.setCurrentTab('user')
    },
    ...mapActions([
      'setCurrentTab'
    ]),
    gotoInfo() {
      wx.navigateTo({
        url: '/pages/user-basic/main'
      })
    }
  }
}
</script>

<style scoped lang="less">
  .weui-cells:before{
    border-top: none;
  }
  .infobox{
    position: relative;
    padding-top: 40rpx;
    padding-bottom:60rpx;
  }
  .avatarbox{
    text-align: center;
    position: relative;
  }
  .edit{
    position: absolute;
    padding: 24rpx;
    top: 0;
    right: 0;
    font-size:28rpx;
    color:#999;
  }
  .tag-role{
    position: absolute;
    right: 50%;
    bottom: 70rpx;
    margin-right: -80rpx;
  }
</style>
